<template>
  <div class="animate__bounceInDown animate__bounceInLeft animate__bounceInRight animate__bounceInUp">
    <div class="rectangle" v-for="item in data.envelope" :key="item.id">
      <div v-if="item.index == 0">
        <div class="head">
          <div class="rich">恭喜发财，大吉大利</div>
        </div>
        <div class="open">
          <div class="village">
            <label class="kai" @click="events.kai(item.id)">開</label>
          </div>
        </div>
        <div class="see">看看大家的手气></div>
      </div>
      <div v-if="item.index == 1">
        <div class="header">
          <div class="num">
            恭喜你获得<span class="money"><count-to :startVal="0" :endVal="item.num" :decimals="2" :duration="600"></count-to></span
            >元
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
 <script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const data = reactive<any>({
  envelope: [
    { id: 1, index: 0, num: 100 },
    { id: 2, index: 0, num: 100 },
    { id: 3, index: 0, num: 100 },
    { id: 4, index: 0, num: 100 },
    { id: 5, index: 0, num: 100 },
    { id: 6, index: 0, num: 100 },
    { id: 7, index: 0, num: 100 },
    { id: 8, index: 0, num: 100 },
    { id: 9, index: 0, num: 100 },
    { id: 10, index: 0, num: 100 },
    { id: 11, index: 0, num: 100 },
    { id: 12, index: 0, num: 100 },
    { id: 13, index: 0, num: 100 },
    { id: 14, index: 0, num: 100 },
    { id: 15, index: 0, num: 100 },
    { id: 16, index: 0, num: 100 },
    { id: 17, index: 0, num: 100 },
    { id: 18, index: 0, num: 100 },
    { id: 19, index: 0, num: 100 },
    { id: 20, index: 0, num: 100 },
  ],
});
const events = {
  kai(id: number) {
    if (data.envelope[id - 1].id == id) {
      data.envelope[id - 1].index = 1;
      data.envelope[id - 1].num = Math.floor(Math.random() * 600);
    }
    // this.index=1;
    // this.num=Math.floor(Math.random() * 600);
  },
};
</script>
  
<style scoped>
.rectangle {
  width: 300px;
  height: 400px;
  background-color: red;
  border: 1px solid red;
  position: relative;
  float: left;
  margin-right: 18px;
  margin-bottom: 18px;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
  --animate-duration: 2s;
}
.head {
  width: 300px;
  height: 200px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), 0 0 8px rgba(0, 0, 0, 0.05);
  border-bottom: 1 solid orange;
  border-radius: 0px 0px 145px 145px;
  position: relative;
}
.header {
  width: 300px;
  height: 200px;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), 0 0 8px rgba(0, 0, 0, 0.05);
  border-bottom: 1 solid orange;
  border-radius: 0px 0px 145px 145px;
  position: relative;
}
.rich {
  color: gold;
  font-size: 25px;
  position: absolute;
  top: 50px;
  left: 37px;
}
.num {
  font-size: 30px;
  position: absolute;
  top: 50px;
  left: 16px;
}
.money{
  color: gold;
}
.open {
  position: absolute;
  background-color: goldenrod;
  border: 1 solid goldenrod;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  bottom: 55px;
  left: 100px;
  position: relative;
}
.village {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 100px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background-color: goldenrod;
  border: 1 solid goldenrod;
  top: 10px;
  left: 10px;
}
.kai {
  font-size: 45px;
  position: absolute;
  top: 0px;
  left: 18px;
}
.see {
  color: white;
  font-size: 20px;
  position: absolute;
  left: 70px;
}
</style>